<template>
  <view class="page">
    <view class="header">
      <text class="title">工作台</text>
      <view class="right">
        <button class="icon-btn" :class="{ spinning: isRefreshing }" @tap="refresh">
          ↻
        </button>
      </view>
    </view>
    <view class="progress" v-show="isRefreshing"><view class="bar" /></view>

    <view class="card kpi" :class="{ dim: isRefreshing }">
      <view class="kpi-item">
        <text class="kpi-num">{{ kpi.waiting }}</text>
        <text class="kpi-label">待诊</text>
      </view>
      <view class="kpi-item">
        <text class="kpi-num">{{ kpi.today }}</text>
        <text class="kpi-label">今日接诊</text>
      </view>
      <view class="kpi-item">
        <text class="kpi-num">{{ kpi.messages }}</text>
        <text class="kpi-label">未读消息</text>
      </view>
    </view>

    <view class="grid" :class="{ dim: isRefreshing }">
      <view class="quick card" @tap="go('/pages/quality/index')">
        <text class="q-title">病历质检</text>
        <text class="q-sub">AI 质检 12 条待处理</text>
      </view>
      <view class="quick card" @tap="go('/pages/doctor/patients')">
        <text class="q-title">我的患者</text>
        <text class="q-sub">共 128 人 · 最新 3 人</text>
      </view>
    </view>

    <view class="card" :class="{ dim: isRefreshing }">
      <text class="mini-title">待诊队列</text>
      <view class="list">
        <view class="item" v-for="p in waitingList" :key="p.id">
          <view class="left">
            <view class="avatar">{{ p.name.slice(0,1) }}</view>
            <view>
              <text class="name">{{ p.name }}</text>
              <text class="sub">{{ p.age }}岁 · {{ p.gender }} · {{ p.chief }}</text>
            </view>
          </view>
          <button class="btn-primary" @tap="openCase(p)">开始接诊</button>
        </view>
      </view>
    </view>

    <view class="overlay" :class="{ show: showSheet }" @tap="onMaskTap">
      <view class="sheet" @tap.stop>
        <view class="drag" />
        <view class="sheet-header">
          <text class="sheet-title">接诊 - {{ current?.name }}</text>
          <button class="icon-btn" @tap="close">✕</button>
        </view>
        <view class="tabs">
          <view class="tab" :class="{ active: sheetTab==='summary' }" @tap="sheetTab='summary'">就诊概览</view>
          <view class="tab" :class="{ active: sheetTab==='register' }" @tap="sheetTab='register'">挂号单</view>
          <view class="tab" :class="{ active: sheetTab==='rx' }" @tap="sheetTab='rx'">开立处方</view>
        </view>
        <scroll-view class="sheet-body" scroll-y>
          <view v-show="sheetTab==='summary'">
            <view class="kv">
              <text class="k">主诉</text><text class="v">{{ current?.chief }}</text>
              <text class="k">生命体征</text><text class="v">体温 36.7℃，血压 118/76</text>
              <text class="k">风险</text><text class="v">低</text>
            </view>
            <view class="footer">
              <button class="btn-outline" @tap="sheetTab='register'">去挂号单</button>
              <button class="btn-primary" @tap="sheetTab='rx'">去开处方</button>
            </view>
          </view>

          <view v-show="sheetTab==='register'">
            <text class="mini-title">挂号信息</text>
            <view class="form">
              <view class="row">
                <text class="label">就诊类型</text>
                <picker mode="selector" :range="visitTypes" :value="reg.visitType" @change="e=>reg.visitType=e.detail.value">
                  <view class="picker">{{ visitTypes[reg.visitType] }}</view>
                </picker>
              </view>
              <view class="row">
                <text class="label">科室</text>
                <picker mode="selector" :range="depts" :value="reg.dept" @change="e=>reg.dept=e.detail.value">
                  <view class="picker">{{ depts[reg.dept] }}</view>
                </picker>
              </view>
              <view class="row">
                <text class="label">时段</text>
                <picker mode="selector" :range="slots" :value="reg.slot" @change="e=>reg.slot=e.detail.value">
                  <view class="picker">{{ slots[reg.slot] }}</view>
                </picker>
              </view>
              <view class="row">
                <text class="label">绿色通道</text>
                <switch :checked="reg.vip" color="#2a7de1" @change="e=>reg.vip=e.detail.value" />
              </view>
              <view class="row">
                <text class="label">挂号费(¥)</text>
                <input class="input" type="number" v-model.number="reg.fee" />
              </view>
              <view class="row column">
                <text class="label">备注</text>
                <textarea class="textarea" v-model="reg.note" placeholder="可填写特殊说明" />
              </view>
            </view>
            <view class="footer">
              <button class="btn-outline" @tap="saveRegisterDraft">保存草稿</button>
              <button class="btn-primary" @tap="submitRegister">提交挂号</button>
            </view>
          </view>

          <view v-show="sheetTab==='rx'">
            <text class="mini-title">处方信息</text>
            <view class="rx-list">
              <view class="rx-item" v-for="(d,idx) in rx.items" :key="d.id">
                <view class="rx-head">
                  <text class="drug">{{ d.name }} {{ d.spec }}</text>
                  <button class="btn-outline" @tap="removeDrug(idx)">删除</button>
                </view>
                <view class="rx-grid">
                  <view class="cell">
                    <text class="lbl">用量</text>
                    <input class="input" type="digit" v-model.number="d.dose" @input="calcRx" />
                  </view>
                  <view class="cell">
                    <text class="lbl">单位</text>
                    <picker mode="selector" :range="doseUnits" :value="d.unitIdx" @change="e=>{d.unitIdx=e.detail.value;calcRx()}"><view class="picker">{{ doseUnits[d.unitIdx] }}</view></picker>
                  </view>
                  <view class="cell">
                    <text class="lbl">频次</text>
                    <picker mode="selector" :range="freqs" :value="d.freqIdx" @change="e=>{d.freqIdx=e.detail.value;calcRx()}"><view class="picker">{{ freqs[d.freqIdx] }}</view></picker>
                  </view>
                  <view class="cell">
                    <text class="lbl">天数</text>
                    <input class="input" type="number" v-model.number="d.days" @input="calcRx" />
                  </view>
                </view>
                <view class="rx-foot">
                  <text class="price">单价 ¥{{ d.price.toFixed(2) }}</text>
                  <text class="qty">数量 × {{ d.qty }}</text>
                  <text class="amount">小计 ¥{{ (d.qty * d.price).toFixed(2) }}</text>
                </view>
              </view>
              <button class="btn-outline full" @tap="openDrugPicker">+ 添加药品</button>
            </view>
            <view class="rx-summary">
              <text>医保：<switch :checked="rx.insurance" color="#2a7de1" @change="e=>rx.insurance=e.detail.value" /></text>
              <text>合计：¥{{ rx.total.toFixed(2) }}</text>
            </view>
            <view class="footer">
              <button class="btn-outline" @tap="saveRxDraft">保存草稿</button>
              <button class="btn-primary" @tap="submitRx">提交审核</button>
            </view>
          </view>
        </scroll-view>

        <!-- 药品选择子面板 -->
        <view class="subsheet" v-if="showDrugPicker">
          <view class="sub-head">
            <text class="sheet-title">选择药品</text>
            <button class="icon-btn" @tap="showDrugPicker=false">✕</button>
          </view>
          <scroll-view class="sub-body" scroll-y>
            <view class="drug-item" v-for="drug in drugCatalog" :key="drug.id" @tap="addDrug(drug)">
              <text class="di-title">{{ drug.name }} {{ drug.spec }}</text>
              <text class="di-sub">¥{{ drug.price.toFixed(2) }}</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      kpi: { waiting: 5, today: 18, messages: 3 },
      waitingList: [
        { id: 1, name: '王小明', age: 32, gender: '男', chief: '咽痛低热2天' },
        { id: 2, name: '李红', age: 27, gender: '女', chief: '咳嗽伴痰1周' },
        { id: 3, name: '张强', age: 44, gender: '男', chief: '胸闷活动后加重' }
      ],
      showSheet: false,
      current: null,
      sheetTab: 'summary',
      visitTypes: ['普通门诊','专家门诊','急诊'],
      depts: ['呼吸内科','心内科','消化内科','神经内科'],
      slots: ['当天上午','当天下午','次日上午','次日下午'],
      reg: { visitType: 0, dept: 0, slot: 0, vip: false, fee: 15, note: '' },
      doseUnits: ['mg','g','ml','片'],
      freqs: ['qd','bid','tid','qid','q8h','prn'],
      rx: { insurance: true, items: [], total: 0 },
      showDrugPicker: false,
      drugCatalog: [
        { id: 'D001', name: '布洛芬缓释胶囊', spec: '0.3g*10粒', price: 12.5 },
        { id: 'D002', name: '阿莫西林胶囊', spec: '0.5g*12粒', price: 18.9 },
        { id: 'D003', name: '氯雷他定片', spec: '10mg*6片', price: 8.0 }
      ],
      isRefreshing: false
    }
  },
  methods: {
    refresh() {
      if (this.isRefreshing) return
      this.isRefreshing = true
      setTimeout(() => {
        // 随机刷新 KPI
        this.kpi = {
          waiting: Math.floor(Math.random()*6)+3,
          today: this.kpi.today + (Math.random() > 0.5 ? 1 : 0),
          messages: Math.floor(Math.random()*5)
        }
        // 打乱待诊队列
        this.waitingList = [...this.waitingList].sort(() => Math.random() - 0.5)
        this.isRefreshing = false
        uni.showToast({ title: '已更新', icon: 'success', duration: 800 })
      }, 800)
    },
    go(url) { uni.navigateTo({ url }) },
    openCase(p) { this.current = p; this.showSheet = true; this.sheetTab = 'summary' },
    close() { this.showSheet = false },
    onMaskTap(e) { if (e.target.classList.contains('overlay')) this.close() },
    saveRegisterDraft() { uni.showToast({ title: '挂号草稿已保存', icon: 'none' }) },
    submitRegister() { uni.showToast({ title: '挂号提交成功', icon: 'success' }) },
    openDrugPicker() { this.showDrugPicker = true },
    addDrug(drug) { this.rx.items.push({ id: drug.id, name: drug.name, spec: drug.spec, price: drug.price, dose: 1, unitIdx: 3, freqIdx: 2, days: 3, qty: 9 }); this.showDrugPicker=false; this.calcRx() },
    removeDrug(idx) { this.rx.items.splice(idx,1); this.calcRx() },
    calcRx() { this.rx.items.forEach(d => { const freqMap=[1,2,3,4,3,1]; const f=freqMap[d.freqIdx]||1; d.qty = Math.max(1, Math.round(f * d.days)); }); this.rx.total = this.rx.items.reduce((s,d)=> s + d.qty * d.price, 0) },
    saveRxDraft() { uni.showToast({ title: '处方草稿已保存', icon: 'none' }) },
    submitRx() { uni.showToast({ title: '处方提交审核', icon: 'success' }) },
    noop() {}
  }
}
</script>

<style>
.page { padding: 12px; background: linear-gradient(180deg, #eef3fb, #f8fafc); min-height: 100vh; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.title { font-weight: 700; font-size: 34rpx; color: #1a1f36; }
.icon-btn { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; background: #fff; border: 2rpx solid #e6e8ee; border-radius: 12rpx; color: #667085; }
.icon-btn.spinning { animation: spin 0.8s linear infinite }
@keyframes spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
.progress { height: 6rpx; background: #e6eefb; border-radius: 6rpx; overflow: hidden; margin: 6rpx 0 12rpx }
.progress .bar { width: 40%; height: 100%; background: linear-gradient(90deg,#2a7de1,#6ea7f0); animation: loading 1s ease-in-out infinite }
@keyframes loading { 0% { transform: translateX(-40%) } 50% { transform: translateX(40%) } 100% { transform: translateX(120%) } }
.card { background: #ffffff; border: 2rpx solid #e6e8ee; border-radius: 28rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,0.08); padding: 20rpx; }
.dim { opacity: .6; filter: saturate(.8) }
.kpi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12rpx; margin-bottom: 12rpx; }
.kpi-item { background:#f8fafc; border: 2rpx solid #e6e8ee; border-radius: 20rpx; padding: 20rpx; text-align: center; }
.kpi-num { font-weight: 800; font-size: 40rpx; color:#1a1f36 }
.kpi-label { color:#667085; font-size: 22rpx }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; margin-bottom: 12rpx; }
.quick .q-title { font-weight: 700; font-size: 30rpx; display:block }
.quick .q-sub { color:#667085; font-size: 22rpx }
.mini-title { font-size: 22rpx; color: #667085; margin-bottom: 10rpx; font-weight: 600; display: block; }
.list { display: grid; gap: 12rpx; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 12rpx; align-items: center; padding: 16rpx; border: 2rpx solid #e6e8ee; border-radius: 18rpx; }
.left { display:flex; gap: 12rpx; align-items:center }
.avatar { width: 84rpx; height: 84rpx; border-radius: 9999rpx; background: linear-gradient(135deg, #cfe4ff, #a6c8ff); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1c3f7b; }
.name { font-weight: 700; font-size: 28rpx; display:block }
.sub { color:#667085; font-size:22rpx; display:block; margin-top: 4rpx }
.btn-primary { padding: 12rpx 20rpx; border-radius: 14rpx; background: linear-gradient(180deg, #2a7de1, #1f63b5); color: #fff; font-weight: 600; box-shadow: 0 12rpx 28rpx rgba(42, 125, 225, 0.28); }
.btn-outline { padding: 12rpx 20rpx; border-radius: 14rpx; background: #fff; border: 2rpx solid #e6e8ee; color: #1a1f36; font-weight: 600; }

.overlay { position: fixed; left:0; top:0; right:0; bottom:0; background: rgba(15,23,42,.45); display:none; align-items:flex-end; z-index: 99 }
.overlay.show { display:flex }
.sheet { width:100%; background:#fff; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; box-shadow: 0 -24rpx 60rpx rgba(2,6,23,.28); max-height:74vh; animation: slideUp .22s ease-out }
@keyframes slideUp { from { transform: translateY(20rpx); opacity:.6 } to { transform: translateY(0); opacity:1 } }
.drag { width: 120rpx; height: 10rpx; background: #e2e8f0; border-radius: 9999rpx; margin: 16rpx auto }
.sheet-header { display:flex; align-items:center; justify-content:space-between; padding: 16rpx 20rpx; border-bottom: 2rpx solid #e6e8ee; position:sticky; top:0; background:#fff; z-index:1 }
.sheet-title { font-weight:700; font-size:28rpx }
.tabs { display:flex; gap: 12rpx; padding: 12rpx 20rpx; border-bottom: 2rpx solid #e6e8ee; white-space: nowrap }
.tab { padding: 10rpx 18rpx; border-radius: 16rpx; background: #f1f5f9; font-size: 22rpx; font-weight: 600; color: #334155 }
.tab.active { background: rgba(42,125,225,0.12); color: #2a7de1 }
.sheet-body { padding: 16rpx 20rpx 26rpx; max-height: 60vh }
.kv { display:grid; grid-template-columns: auto 1fr; gap: 8rpx 20rpx; font-size: 24rpx; align-items:center }
.k { color:#667085 }
.v { font-weight:700 }
.footer { display:grid; grid-template-columns:1fr 1fr; gap: 12rpx; margin-top: 16rpx }

/* forms */
.form { display:grid; gap: 12rpx }
.row { display:flex; justify-content:space-between; align-items:center; gap: 12rpx }
.row.column { flex-direction: column; align-items: stretch }
.label { color:#667085; font-size: 24rpx }
.picker { min-width: 200rpx; padding: 10rpx 16rpx; background:#fff; border:2rpx solid #e6e8ee; border-radius: 12rpx }
.input { min-width: 200rpx; height: 64rpx; padding: 0 16rpx; background:#fff; border:2rpx solid #e6e8ee; border-radius: 12rpx }
.textarea { width: 100%; min-height: 140rpx; padding: 12rpx 16rpx; border:2rpx solid #e6e8ee; border-radius: 12rpx; background:#fff }

/* rx */
.rx-list { display:grid; gap: 12rpx }
.rx-item { border:2rpx solid #e6e8ee; border-radius: 18rpx; padding: 16rpx; background:#fff }
.rx-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12rpx }
.drug { font-weight:700; font-size: 28rpx }
.rx-grid { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12rpx }
.cell .lbl { color:#667085; font-size: 22rpx; display:block; margin-bottom: 6rpx }
.rx-foot { display:flex; justify-content:flex-end; gap: 16rpx; color:#334155; margin-top: 10rpx }
.price, .qty, .amount { font-size: 22rpx }
.full { width: 100% }
.rx-summary { display:flex; justify-content:space-between; align-items:center; padding: 12rpx 0 }

/* subsheet for drug catalog */
.subsheet { position: absolute; left:0; right:0; bottom:0; background:#fff; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; box-shadow: 0 -24rpx 60rpx rgba(2,6,23,.28); max-height: 60vh; display:flex; flex-direction:column }
.sub-head { display:flex; justify-content:space-between; align-items:center; padding: 16rpx 20rpx; border-bottom: 2rpx solid #e6e8ee }
.sub-body { padding: 10rpx 20rpx; max-height: calc(60vh - 60rpx) }
.drug-item { display:flex; justify-content:space-between; align-items:center; padding: 16rpx 0; border-bottom: 2rpx solid #e6e8ee }
.di-title { font-weight:700; font-size: 28rpx }
.di-sub { color:#667085; font-size: 22rpx }
</style>


